<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList">
    <el-card shadow="never" :body-style="{ padding: '0',border:'none'}" @click.native.stop="selectWidget(widget)" :class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '']">
      <div class="container">
        <div style="min-width: 263px;margin-bottom: 10px;">
            <template v-for="(subWidget, swIdx) in widget.widgetList">
              <grid-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget"></grid-widget>
            </template>
        </div>
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(item, index) in fieldModel"
            :key="index"
            :timestamp="item.timestamp"
            :icon="item.icon"
            :hide-timestamp="item.hideTimestamp"
            :placement="item.placement"
            :type="item.type"
            :color="item.color"
            :size="item.size">
            {{item.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </container-wrapper>
</template>

<script>
import {vformContainerMixin,vformRefMixinDesign} from '@/../lib/VFormDesigner.umd.min.js'
export default {
  name: "timeline1-widget",
  componentName: 'ContainerWidget',
  mixins: [vformContainerMixin, vformRefMixinDesign],
  inject: ['refList'],
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

  },
  created() {
    //新建一个格栅（另一种方式是直接在schema文件直接将该格栅写入）
    if(!this.widget.widgetList || this.widget.widgetList.length<=0){
      let grid = this.$vformUtil.deepClone(this.designer.getContainerByType('grid'))
      let tmpId = this.$vformUtil.generateId()
      grid.id = 'grid-' + tmpId
      grid.options.name = 'grid' + tmpId
      //添加格栅列
      let newCol = this.$vformUtil.deepClone(this.designer.getContainerByType('grid-col'))
      newCol.id = 'grid-col-' + tmpId
      newCol.options.name = 'gridCol' + tmpId
      grid.cols.push(newCol)
      this.widget.widgetList.push(grid)
    }
    this.initRefList()
  },
  mounted() {

  },
  data() {
    return {
      fieldModel: [{
        "content": "我是第三方系统配置的组件",
        "timestamp": "2018-04-19",
        "type":"info",
        "placement":"top"
      }, {
        "content": "我是第三方系统配置的组件",
        "timestamp": "2018-04-17",
        "type":"danger",
        "hideTimestamp":true
      }, {
        "content": "我是第三方系统配置的组件",
        "timestamp": "2018-04-15",
        "type":"warning",
        "icon":"el-icon-warning-outline"
      }, {
        "content": "我是第三方系统配置的组件",
        "timestamp": "2018-04-13",
        "type":"success"
      }, {
        "content": "我是第三方系统配置的组件",
        "timestamp": "2018-04-11",
        "type":"primary"
      }],
      reverse: true,
    }
  },
  methods: {
    addToolButtons(widgetList){
      const uuid = vform.vformUtil.generateId();
      widgetList.push(
        {
          "type": "vbutton",
          "name": "按钮",
          "icon": "button",
          "formItemFlag": false,
          "options": {
              "name": "vbutton" + uuid,
              "customClass": [],
              "vbuttonV2":"",
              "icon":"",
              "label":"按钮",
              "columnWidth": "200px",
              "size": "medium",
              "hidden":false,
              "type":"primary",
              "displayStyle": "inline-block",
              "onCreated": "",
              "onMounted": "",
              "onClick": ""
          },
          "id": "vbutton" + uuid
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.el-card.selected {
  outline: 1px dashed blue !important;
}
</style>
